<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${item != null ? item.title : '未找到'}">文章详情</title>
    <style>
        body{font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Microsoft YaHei, sans-serif;background:#fff;color:#111827;margin:0}
        .container{max-width:920px;margin:0 auto;padding:1.25rem}
        .header{margin-bottom:1rem}
        h1{font-size:2rem;margin:.25rem 0 .5rem 0;line-height:1.3}
        .meta{color:#6b7280;margin-bottom:0.5rem}
        .layout{display:block}
        .content{line-height:1.85;font-size:1.02rem}
        .content img{max-width:100%;height:auto;border-radius:.5rem;box-shadow:0 1px 4px rgba(0,0,0,.06);margin:1rem 0}
        .content h2{font-size:1.5rem;margin:1.5rem 0 .75rem 0;border-bottom:1px solid #f3f4f6;padding-bottom:.4rem}
        .content h3{font-size:1.25rem;margin:1.25rem 0 .5rem 0}
        .content p{margin:.75rem 0}
        .content ul,.content ol{margin:.5rem 0 .75rem 1.25rem}
        .content blockquote{border-left:4px solid #3b82f6;padding:.4rem .9rem;margin:1rem 0;color:#4b5563;background:#f8fafc;border-radius:.25rem}
        .content table{border-collapse:collapse;width:100%;margin:1rem 0}
        .content th,.content td{border:1px solid #e5e7eb;padding:.5rem .6rem}
        .content pre{background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:.5rem;overflow:auto;position:relative}
        .content code{background:#f3f4f6;padding:.2em .4em;border-radius:.25rem}
        .copy-btn{position:absolute;top:.5rem;right:.5rem;background:#111827;color:#fff;border:none;border-radius:.375rem;padding:.25rem .5rem;font-size:.8rem;cursor:pointer;opacity:.9}
        .copy-btn:hover{opacity:1}
        .reading{color:#6b7280;font-size:.9rem}
        .related{margin-top:2rem;border-top:1px solid #e5e7eb;padding-top:1rem}
        .related h3{font-size:1.125rem;margin:0 0 .75rem 0}
        .related-list{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
        .related a{display:block;text-decoration:none;color:#111827;border:1px solid #e5e7eb;border-radius:.5rem;padding:.6rem .75rem;background:#fff}
        .related a:hover{background:#f9fafb}
        .related .meta{font-size:.85rem;color:#6b7280;margin-top:.25rem}
        @media (max-width: 768px){.related-list{grid-template-columns:1fr}}
        a.back{display:inline-flex;align-items:center;margin-top:.5rem;color:#2563eb;text-decoration:none}
        /* Mobile adjustments */
        @media (max-width: 768px){
            .container{padding:1rem}
            h1{font-size:1.5rem}
            .content{font-size:1rem;line-height:1.8}
            .content pre{font-size:.9rem}
        }
    </style>
</head>
<body>
<div class="container" th:if="${item != null}">
    <div class="header">
        <h1 th:text="${item.title}"></h1>
        <div class="meta">
            <span th:text="${item.category != null ? item.category : '未分类'}"></span>
            ·
            <span th:text="${#temporals.format(item.updatedAt, 'yyyy-MM-dd HH:mm')}"></span>
            ·
            <span class="reading" id="reading-time"></span>
        </div>
        
    </div>
    <div class="layout">
        <div class="content" id="md-content"></div>
    </div>
    <div class="related" th:if="${related != null and #lists.size(related) > 0}">
        <h3>相关文章</h3>
        <div class="related-list">
            <a th:each="r : ${related}" th:href="@{'/article/' + ${r.id}}">
                <div th:text="${r.title}">标题</div>
                <div class="meta">
                    <span th:text="${r.category != null ? r.category : '未分类'}"></span>
                    ·
                    <span th:text="${#temporals.format(r.updatedAt, 'yyyy-MM-dd HH:mm')}"></span>
                </div>
            </a>
        </div>
    </div>
</div>
<div class="container" th:if="${item == null}">
    <h2>未找到该文章</h2>
    <a class="back" href="/">返回首页</a>
</div>
<!-- Markdown render libs -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github-dark.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js"></script>
<script th:inline="javascript">
    // 从后端注入内容（可能是富文本HTML或Markdown）
    const raw = /*[[${item != null ? item.content : ''}]]*/ '';
    const hasHtmlTag = /<[^>]+>/.test(raw || '');
    let html = '';
    if (hasHtmlTag) {
        // wangEditor 富文本，直接使用
        html = raw || '';
    } else {
        // Markdown 渲染
        html = marked.parse(raw || '');
    }
    const contentEl = document.getElementById('md-content');
    contentEl.innerHTML = DOMPurify.sanitize(html);
    // 代码高亮
    contentEl.querySelectorAll('pre code').forEach((el)=>{ hljs.highlightElement(el); });
    // 复制代码按钮
    contentEl.querySelectorAll('pre').forEach(pre=>{
        const btn = document.createElement('button');
        btn.className = 'copy-btn';
        btn.innerText = '复制';
        btn.addEventListener('click', ()=>{
            const code = pre.querySelector('code')?.innerText || '';
            navigator.clipboard.writeText(code);
            btn.innerText = '已复制';
            setTimeout(()=>btn.innerText='复制', 1200);
        });
        pre.appendChild(btn);
    });
    // 生成目录（基于 h2/h3）
    const tocItems = document.getElementById('toc-items');
    const headings = contentEl.querySelectorAll('h2, h3');
    let index = 0;
    headings.forEach(h=>{
        if(!h.id){ h.id = 'h-' + (++index); }
        const a = document.createElement('a');
        a.href = '#' + h.id;
        a.textContent = h.textContent;
        if(h.tagName === 'H3') a.style.paddingLeft = '12px';
        tocItems.appendChild(a);
    });
    // 估算阅读时长（按中文每分钟500字/英文每分钟200词）
    const plain = contentEl.innerText.trim();
    const chineseChars = (plain.match(/[\u4e00-\u9fa5]/g) || []).length;
    const latinWords = (plain.replace(/[\u4e00-\u9fa5]/g,'').match(/\b\w+\b/g) || []).length;
    const minutes = Math.max(1, Math.round(chineseChars/500 + latinWords/200));
    const rt = document.getElementById('reading-time');
    if(rt){ rt.textContent = minutes + ' 分钟读完'; }
    // 可选：为外链添加 target=_blank
    document.querySelectorAll('#md-content a[href^="http"]').forEach(a=>a.setAttribute('target','_blank'));
    
</script>
</body>
</html>
